import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { parsePrice } from '@utils/utils'
import './index.scss'

class Production extends Taro.Component {
    state = {
        loaded: false,
        loading: false
    }

    prodInfo(prodId) {
        Taro.navigateTo({
            url: '/pages/prod_detail/index?prodId=' + prodId
        })
    }

    product(item, sts) {
        return (
            <View className='prod-items' onClick={() =>this.prodInfo(item.prodId)} data-prodid={item.prodId}>
                <View className='hot-imagecont'>
                    <Image src={item.pic} className='hotsaleimg' />
                </View>
                <View className='hot-text'>
                    <View className='hotprod-text'>{item.prodName}</View>
                    {sts === 6 &&
                        <View className='prod-info'>{item.prodCommNumber}评价 {item.positiveRating}%好评</View>
                    }
                    <View className='prod-text-info'>
                        <View className='price'>
                            {sts === 2 &&
                                <Text className='deadline-price'>限时价</Text>
                            }
                            <Text className='symbol'>￥</Text>
                            <Text className='big-num'>{parsePrice(item.price)[0]}</Text>
                            <Text className='small-num'>.{parsePrice(item.price)[1]}</Text>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
    render() {
        const { list, sts } = this.props
        const product = (list || []).map(item => {
            return this.product(item, sts)
        })
        return (
            <View className='prod-list'>
                <View className='prod-show'>
                    <View className='hotsale-item-cont'>
                        {
                            product
                        }
                    </View>
                </View>
            </View>
        )
    }
}

export default Production